<template>
  <div class="search">
    <el-autocomplete
        v-model="searchText"
        :fetch-suggestions="querySearch"
        @select="goDetail"
        :trigger-on-focus="false"
        class="form"
        clearable
        placeholder="请输入医院名称"/>
    <el-button type="primary" :icon="Search">搜索</el-button>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
import {reqHospitalInfo} from "@/api/home";
import {useRouter} from "vue-router";
const $router = useRouter()
const searchText = ref<string>('')

const querySearch = async (keyword,cb) => {
  console.log(keyword,cb)
  const result = await reqHospitalInfo(keyword);
  const showDataMap = result.data.map(item=>{
    return {
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  cb(showDataMap)
}
const goDetail = (item)=>{
  console.log(item)
  $router.push({
    path:'/hospital/register',
    query:{
      hoscode:item.hoscode
    }
  })
}

</script>

<style scoped lang="scss">
.search{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 10px 0;
  :deep(.form){
    width: 600px;
    margin-right: 10px;
  }
}
</style>
